<!DOCTYPE html>
<!-- saved from url=(0048)http://v3.bootcss.com/examples/navbar-fixed-top/ -->
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/icon.png">

    <title>在线导游 - 旅游网络系统</title>

    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
	
	<link href="./css/navbar-fixed-top.css" rel="stylesheet">
	<link href="./css/index.css" rel="stylesheet">
	
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IO1RLDWOab7cGGZSIhb9CeVN"></script>

	<style>
		#account_bind_modal .modal-dialog {
			max-width: 360px;
		}
		#content_left {
			padding-left: 15px;
			padding-right: 15px;
			margin-bottom: 20px;
		}
		@media (max-width: 768px){
			#content_left {
				height: 260px;
			}
			#content_left img {
				float: left;
				margin-right: 15px;
			}
		}
		@media (min-width: 768px) {
			#content_left {
				position: absolute;
				width: 260px;
			}
			#content_right {
				left: 290px;
				margin-left: 260px;
			}
			#base_setting .control-label {
				/*width: 6em;*/
			}
		}
		.user_ach {
			color:black;
			font-size: 16px;
			margin:4px 4px 4px 4px;
			padding: 5px 10px 5px 10px;
			display: block;
			float: left;
			background-color: #DEC;
			border: 1px solid #DEC;
			border-radius: 5px;
			text-decoration: none;
		}
		.user_ach:hover {
			background-color: #FEA;
			border-radius: 5px;
			border: 1px solid #C60;
			text-decoration: none;
			color: darkred;
		}
		.err-msg-label {
			display: none
		}
		.has-error .err-msg-label {
			display: block
		}
		<!--baidu map api css -->
		#l-map{
			height: 300px;
			width: 100%;
		}
		#r-result,#r-result table{
			width:100%;
		}
	</style>
</head>
<body>
	<?php
		require "header.php";
	?>
    <?php
		require "nav.php";
	?>
	
	<div class="container">
        <div class="row">
			<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
				<ul id="docs-accordion" class="sidebar_nav panel-group" style="list-style:none;"> <!-- id="docs-accordion" very important -->
					<form role="form">
						<div class="form-group">
							<input type="text" class="form-control" id="nav_search_area" placeholder="Search..." id="mkdocs-search-query">
						</div>
					</form>
					<div id="mkdocs-search-results">
					</div>
					<!--
					<li class="panel panel-default" >
						<a href="#" onclick="return false;" data-toggle="collapse" data-parent="#docs-accordion" data-target="#gettingstarted" class="panel-head toggable collapsed">
							Getting Started
						</a>
						<ul id="gettingstarted" class="panel-collapse collapse">
							<li class="">
								<a href="" class="page_link" onclick="return ajax_getdata();">
									Launch your first instance
								</a>
							</li>
						</ul>
					</li>
					-->
					<li class="panel panel-default">
						<a href="#" onclick="return false;" data-toggle="collapse" data-parent="#docs-accordion" data-target="#coreconcepts" class="panel-head toggable collapsed">
							旅游
						</a>
						<ul id="coreconcepts" class="panel-collapse collapse">
							<li class="">
								<a href="" class="page_link" onclick="return ajax_getTourMessage();">旅游信息</a>
							</li>
							<li class="">
								<a href="" class="page_link" onclick="return ajax_getMapMessage();">旅游路线导航</a>
							</li>
						</ul>
					</li>
					<li class="panel panel-default">
						<a href="#" onclick="return false;" data-toggle="collapse" data-parent="#docs-accordion" data-target="#deployinginthecloud" class="panel-head toggable">
							住宿
						</a>
						<ul id="deployinginthecloud" class="panel-collapse collapse">
							<li class="">
								<a href="" class="page_link" onclick="return ajax_getHotelMessage();">酒店</a>
							</li>
							<!--
							<li class="">
								<a href="../deploying-in-the-cloud/gcompute/" class="page_link">Google Cloud</a>
							</li>
							-->
						</ul>
					</li>
					<li class="panel panel-default">
						<a href="#" onclick="return false;" data-toggle="collapse" data-parent="#docs-accordion" data-target="#features" class="panel-head toggable">
							社交
						</a>
						<ul id="features" class="panel-collapse collapse">
							<li class="">
								<a href="" class="page_link" onclick="return ajax_getFriendMessage();">我的朋友</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
            <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 docs-content" role="main">
				<div id="container" style="width:auto; padding:10px 20px; border: 1px solid #ddd; border-radius: 4px; min-height: 490px; margin-bottom: 5px;">
					<div class="container center-block" style="width: 100%;">
						<div class="page-header ">
							<p style="font-size: 22px; color: #337ab7;">
								<marquee direction=left behavior=scroll onmouseover=this.stop() onmouseout=this.start()>
									~热门景点~
								</marquee>
							</p>
						</div>
						<div id="jumbotron" class="jumbotron center-block">
							<div id="jumbotron_row" class="row">
								<div id="img_left" class="col-md-1 text-center">
									<a id="img_left_span" class="btn btn-default" onclick="return img_sub()">
										<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
									</a>
								</div>
								<div id="img_right" class="col-md-1 col-md-offset-10 text-center">
									<a id="img_right_span" class="btn btn-default" onclick="return img_add()">
										<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
									</a>
								</div>
							</div>				
						</div>
						<div id="msg_bottom" class="text-left" style="margin-top: -120px; width: auto; height: 90px; background-color: black; border-radius: 4px; opacity: 0.2; border-top: 1px solid #ddd;">
						</div>
						<p id="img_txt" style="border: 1px solid #ddd; margin-top: -90px; width: auto; height: 90px; color: white; text-indent: 2em; font-size: 10px;">
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<?php
		require "footer.php";
	?>
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	
	<script src="./js/require.js"></script>
    
	<script src="./js/jquery-1.11.0.min.js"></script>
	<!--
    <script src="./js/jquery.min.js"></script>
	-->
	<script src="./js/bootstrap.min.js"></script>
	
	<script>
		function ajax_getsensemessage(id) {
			//alert(id);
			$.get(
				'getsensemessage.php?id='+id,
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.data+ "\n状态：" + status);
					$('#img_txt').html(data.data);
					//window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"json");
			return false;
		}
		$(function() {
			//alert("!");
			$('#jumbotron').css("background","url(./css/img/sense_0_0.jpg)");
			$('#img_left_span').val("0");
			$('#img_right_span').val("0");
			ajax_getsensemessage(0);//$('#img_txt').html("lalalallalalalallalalalallalalalallalalalallalalallalla_0");
			
			
			$('#jumbotron').css("height","330px");
			$('#img_left').css("opacity","0.2");
			$('#img_right').css("opacity","0.2");
			$('#jumbotron_row').css("margin-top","90px");
			//.jumbotron{ background:url(images/banner.png);}
		});
		function img_sub() {
			var id = $('#img_left_span').val();
			if (id > 0) {
				id--;
				$('#jumbotron').css("background-image","url(./css/img/sense_"+id+"_0.jpg)");
				$('#img_left_span').val(id);
				$('#img_right_span').val(id);
				ajax_getsensemessage(id);//$('#img_txt').html("lalalallalalalallalalalallalalalallalalalallalalallalla_"+id);
			}
		}
		function img_add() {
			var id = $('#img_right_span').val();
			if (id < 3) {
				id++;
				$('#jumbotron').css("background-image","url(./css/img/sense_"+id+"_0.jpg)");
				$('#img_left_span').val(id);
				$('#img_right_span').val(id);
				ajax_getsensemessage(id);//$('#img_txt').html("lalalallalalalallalalalallalalalallalalalallalalallalla_"+id);
			}
		}
		
		function pop_Regisger() {
			$('#register_modal-dialog').modal('show');
			return false;
		}
		function pop_Login() {
			$('#login_modal-dialog').modal('show');
			return false;
		}
		
		function ajax_post(form,callback) {
			$.post(form.attr('action'),
			form.serialize(), 
			function(data, status) {
				//alert("数据：" + data.status + "\n状态：" + status);
				if (status == "success") {
					callback(data)
				}
			},
			"json");
		}
		function ajax_login() {
			var form=$("#modal_login_form")
			form.find('.form-group').removeClass('has-error');
			ajax_post(form, function(rep) {
				//$("#content").val(rep.status);
				if (rep.status == "success") {
					//alert("!!");
					window.location.reload();
				} else {
					for (err in rep.errors) {
						gp = form.find("[name='"+err+"']").parent()
						gp.find("label").text(rep.errors[err][0]);
						gp.addClass('has-error')
					}
				}
			});
			//alert("!");
			return false;
		}
		function ajax_getdata() {
			$.get(
				'getdatatest.php',
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.data+ "\n状态：" + status);
					$('#container').html(data);
					//window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"html");
			return false;
		}
		function ajax_getTourMessage() {
			$.get(
				'gettourmessage.php',
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.data+ "\n状态：" + status);
					$('#container').html(data);
					//window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"html");
			return false;
		}
		function ajax_getMapMessage() {
			$.get(
				'getbaidumap.php',
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.data+ "\n状态：" + status);
					$('#container').html(data);
					//window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"html");
			return false;
		}
		// gethotelmessage
		function ajax_getHotelMessage() {
			$.get(
				'gethotelmessage.php',
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.data+ "\n状态：" + status);
					$('#container').html(data);
					//window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"html");
			return false;
		}
		// getfriendmessage
		function ajax_getFriendMessage() {
			$.get(
				'getfriendmessage.php',
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.data+ "\n状态：" + status);
					$('#container').html(data);
					//window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"html");
			return false;
		}
		function ajax_logout()
		{
			$.get(
				'logout.php',
				function(data, status){
					//alert("数据：" + data.status+ "\n状态：" + status);
					window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"json");
			return false;
		}
		
		
		// 百度地图API功能
		function G(id) {
			return document.getElementById(id);
		}
		
		var map = new BMap.Map("l-map");
		//map.centerAndZoom(南京, 12); // 初始化地图,设置城市和地图级别。
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图,设置城市和地图级别。
		
		var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
		var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
		var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
		map.addControl(top_right_navigation);
		
		
		var transit = new BMap.DrivingRoute(
			map, {
				renderOptions: {
					map: map,
					panel: "r-result",
					enableDragging : true //起终点可进行拖拽
				}
			});
			
		transit.search("南京理工大学4号门","南京理工大学3号门");
		
		function getRoute(){
			var start = document.getElementById("start").value;
			var end = document.getElementById("end").value;
			if (start == "" || end == ""){
				alert("输入不能为空!");
			}else{
				//alert("!"+start+"!"+end+"!");
				transit.search(start, end);
			}
		}
		
		var ac_start = new BMap.Autocomplete({ //建立一个自动完成的对象
 			"input" : "start"
			,"location" : map
		});
		ac_start.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
			var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
			
			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
			G("searchResultPanel").innerHTML = str;
		});		
		ac_start.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
			var _value = e.item.value;
			var myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		});
		
		var ac_end = new BMap.Autocomplete({ //建立一个自动完成的对象
 			"input" : "end"
			,"location" : map
		});
		ac_end.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
			var str = "";
			var _value = e.fromitem.value;
			var value = "";
			if (e.fromitem.index > -1) {
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
			
			value = "";
			if (e.toitem.index > -1) {
				_value = e.toitem.value;
				value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			}    
			str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
			G("searchResultPanel").innerHTML = str;
		});		
		ac_end.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
			var _value = e.item.value;
			var myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
			G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		});
		
		
		
	</script>
</body>
</html>	